<template>
  <div class="my-message">
    <menu-content-layout title="我的消息">
      <template v-slot:icon>
        <img src="~/assets/images/my-message1.png" alt="" />
      </template>
      <template v-slot:content>
        <menu-content-tabs :tabs="tabs" @switch-tab="handleSwitchTab" />
        <div v-if="$route.name === 'MyMessage'" class="list-wrap">
          <div class="list" v-if="currentTab === 3">
            <div
              class="item"
              v-for="(item, index) in list"
              :key="index"
            >
              <div class="left">
                <div class="info">
                  <div class="product">
                    系统公告:{{ item.notice.notice_title }}
                  </div>
                  <div class="company">{{ item.notice.notice_content }}</div>
                </div>
              </div>
              <div class="right">{{ item.notice.create_time }}</div>
            </div>
            <nodata message="暂无消息" :status="listStatus"></nodata>
            <m-pagination
              :pagination="total"
              :page-size="limit"
              @changePage="changeThisPage"
            />
          </div>
          <div class="list" v-if="currentTab === 1">
            <div
              class="item"
              v-for="(item, index) in businessList"
              :key="index"
            >
              <div class="left">
                <div class="info">
                  <div class="product">
                    业务公告:{{ item.title }}
                  </div>
                  <div class="company">{{ item.content }}</div>
                </div>
              </div>
              <div class="right">{{ item.create_time }}</div>
            </div>
            <nodata message="暂无消息" :status="listStatus"></nodata>
            <m-pagination
              :pagination="total"
              :page-size="limit"
              @changePage="changeThisPage"
            />
          </div>
          <div class="list" v-if="currentTab === 2">
            <div
              class="item"
              v-for="(item, index) in Loglist"
              :key="index"
              @click="pushToDetails(item.news_log_id)"
            >
              <div class="left">
                <div class="title" :class="item.notice_id && 'important'">
                  {{ item.title }}
                </div>
              </div>
              <div class="right">{{ item.create_time }}</div>
            </div>
            <nodata message="暂无消息" :status="listStatus"></nodata>
            <m-pagination
              :pagination="total"
              :page-size="limit"
              @changePage="changeThisPage"
            />
          </div>
        </div>
        <router-view />
      </template>
    </menu-content-layout>
  </div>
</template>

<script>
import MenuContentLayout from "@/components/common/menu-content-layout/MenuContentLayout"
import MenuContentTabs from "@/components/common/menu-content-tabs/MenuContentTabs"
import MPagination from "@/components/common/m-pagination/MPagination"
import MDialog from "@/components/common/m-dialog/MDialog"
import { myMessage, messageSystem, messageBusiness} from "@/request/api"

export default {
  name: "MyMessage",
  components: { MDialog, MPagination, MenuContentTabs, MenuContentLayout },
  data() {
    return {
      tabs: [
        { name: "业务消息", type: 1 },
        { name: "系统消息", type: 2 },
        { name: "系统公告", type: 3 }
      ],
      currentTab: 1,
      list: [],
      Loglist:[], // 系统消息
      businessList:[], // 业务消息
      messageList: [],
      page: 1,
      listStatus: 1,
      total: 0,
      limit: 5
    }
  },
  watch: {
    currentTab: {
      handler() {
        this.list = []
        // 每次tab切换时跳转到my-message路由，为了在details路由下切换切换回来
        this.$router.push({
            path: "/profile/message-management/my-message"
          }).catch((e) => e)
        switch(this.currentTab) {
        case 3: 
          this.getList();
          break;
        case 2: 
          this.getMessageSystem();
          break;
        case 1:
          this.getbusinessList();
          break;
      }
      },
      immediate: true
    }
  },
  created() {
    this.getbusinessList()
  },
  methods: {
    getList() {
      this.listStatus = 1
      this.list = []
      let data = {
        limit: this.limit,
        page: this.page,
        type: this.currentTab
      }
      myMessage(data).then((res) => {
        this.list = res.data.list
        this.total = res.data.count
        if (this.total === 0) {
          this.listStatus = 0
        } else {
          this.listStatus = 2
        }
        window.scrollTo({ top: 0 })
      }).catch(err => {
        this.listStatus = 0
        this.$message.error(err.message)
      })
    },
    changeThisPage(page) {
      this.page = page
      switch(this.currentTab) {
        case 3: 
          this.getList();
          break;
        case 2: 
          this.getMessageSystem();
          break;
        case 1:
          this.getbusinessList();
          break;
      }
    },
    handleSwitchTab(item) {
      this.currentTab = item.type
    },
    pushToDetails(id) {
      this.$router.push({
        path: "/profile/message-management/my-message/details",
        query: { id }
      })
    },
    getbusinessList() {
      messageBusiness().then((res) => {
        if (res.status === 200) {
          this.businessList = res.data.list
          this.total = res.data.count
          if (this.total === 0) {
            this.listStatus = 0
          } else {
            this.listStatus = 2
          }
        }
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    /** 系统消息 */
    getMessageSystem() {
      messageSystem().then((res) => {
        if (res.status === 200) {
          this.Loglist = res.data.list
          this.total = res.data.count
          if (this.total === 0) {
            this.listStatus = 0
          } else {
            this.listStatus = 2
          }
        }
      }).catch(err => {
        this.$message.error(err.message)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.my-message {
  .list {
    margin-top: 15px;

    .item {
      padding: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      cursor: pointer;

      &:not(:last-of-type) {
        border-bottom: solid 1px #eaeaea;
      }

      .left {
        display: flex;

        .important {
          color: $theme-color-1;
        }

        .avatar {
          width: 105px;
          height: 105px;
          border-radius: 50%;
          margin-right: 15px;
        }

        .info {
          display: flex;

          .product {
            margin-bottom: 10px;
            font-size: 16px;
          }
        }
      }

      .right {
        color: #969696;
      }
    }
  }

  .message-wrap {
    font-size: 16px;
    height: 200px;
    line-height: 28px;
    overflow-y: auto;
  }
}
</style>
